<template>
  <div>
    <el-form  ref="dialog2DocumentForm" :model="instrument2TradeFrom.data" :rules="props.dialog2DocumentFormRules" label-width="auto"
             style="text-align: center">
      <!--          <el-form-item label="组合"  label-width="auto">
                  <baseCombox  url="/pricing/group/queryVGroupCombox.action"
                               clearable
                               multiple="true"
                               valueField="dict_val"
                               labelField="dict_disp"
                               size="small"
                               placeholder="组合"    ></baseCombox>

                </el-form-item>-->
      <el-form-item label="本方账户" prop="accId" label-width="auto">
        <baseCombox url="/trade/account/querySelfAccountCombox.action"
                    clearable
                    valueField="accId"
                    labelField="accName"
                    size="small"
                    v-model="instrument2TradeFrom.data.accId"
                    :style="{width: '100%'}" placeholder="本方账户"></baseCombox>
      </el-form-item>
      <el-form-item label="交易对手" label-width="auto" prop="partyId">
        <baseCombox v-model="instrument2TradeFrom.data.partyId"
                    clearable
                    labelField="partyName"
                    url="/trade/counterparty/queryCounterparty4Combox.action"
                    size="small"
                    valueField="partyId"
                    :style="{width: '100%'}" placeholder="对手"></baseCombox>
      </el-form-item>
      <el-form-item label="合约编号" label-width="auto" prop="iCode">
        <el-input v-model="instrument2TradeFrom.data.iCode" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="交易日期" label-width="auto" prop="tradeDate">
        <el-date-picker v-model="instrument2TradeFrom.data.tradeDate" placeholder="选择日期" type="date"
                        value-format="YYYY-MM-DD">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="期初保证金" label-width="auto" prop="margin">
        <el-row style="width: 100%;">
          <el-col :span="6">
            <el-select v-model="instrument2TradeFrom.data.marginDirection" placeholder="请选择">
              <el-option label="支付" value="-1"/>
              <el-option label="收取" value="1"/>
            </el-select>
          </el-col>
          <el-col :span="18">
            <InputAmount v-model:value="instrument2TradeFrom.data.margin" append="元"
                         autocomplete="off" format="#,##0.00" precision="2"
            />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="期权费" label-width="auto" prop="fee">
        <el-row style="width: 100%;">
          <el-col :span="6">
            <el-select v-model="instrument2TradeFrom.data.feeDirection" placeholder="请选择">
              <el-option label="支付" value="-1"/>
              <el-option label="收取" value="1"/>
            </el-select>
          </el-col>
          <el-col :span="18">
            <InputAmount v-model:value="instrument2TradeFrom.data.fee"
                         autocomplete="off" append="元" format="#,##0.00" precision="2"
            />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="期权费支付日" label-width="auto" >
        <el-date-picker v-model="instrument2TradeFrom.data.setDate" placeholder="选择日期" type="date"
                        value-format="YYYY-MM-DD">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="备注" label-width="auto" prop="remark">
        <el-input v-model="instrument2TradeFrom.data.remark" autocomplete="off" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="备注" label-width="auto" prop="remark" v-if="false">
        <el-input v-model="instrument2TradeFrom.data.version" type="text"></el-input>
      </el-form-item>
      <!--                <el-form-item style="display: inline-block ;margin-top: 1rem;">
                        <el-button type="primary" @click="saveTrade">保存</el-button>
                        &lt;!&ndash;             <el-button>Cancel</el-button>&ndash;&gt;
                      </el-form-item>-->
    </el-form>

  </div>
</template>

<script setup>
import {formartFormP4, unFormartNumber, numberPrecision} from '@/utils/numberUtil'
import baseCombox from '@/xquant/base/baseCombox'
import InputAmount from '@/xquant/base/InputAmount'
import {reactive, watch} from "vue";

const props = defineProps({
  instrument2TradeFrom:{
    type: Object,
    default: {
      data: {
        iCode: '',
        accId: '',
        partyId: '',
        margin: '',
        amount: '',
        tradeDate: '',
        remark: '',
        fee: '',
        feeDirection: '',
        setDate: '',
        marginDirection: ''
      }
    }
  },
  dialog2DocumentFormRules:{
    type: Object,
    default: {}
  }
})
const instrument2TradeFrom = reactive({
  data:{
    iCode: '',
    accId: '',
    partyId: '',
    margin: '',
    amount: '',
    tradeDate: '',
    remark: '',
    fee: '',
    feeDirection: '',
    setDate: '',
    marginDirection: ''
  }
})
watch(()=>props.instrument2TradeFrom,(nv)=>{
  instrument2TradeFrom.data = nv.data
})
</script>

<style scoped>

</style>
